<template>
	<div class="slider" ref="slider">
		<div class="slider-group" ref="sliderGroup">
			<slot></slot>
		</div>
		<div class="dots">
			<span  
				v-for="(item, index) in dots"
				:key="index"
				class="dot"
				:class="{'active': currentPageIndex === index}"
			>
			</span>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	import { addClass } from '@/common/js/dom'

	export default {
		name: 'Slider',
		props: {
			loop: {
				type: Boolean,
				default: true
			},
			autoPlay: {
				type: Boolean,
				default: true
			},
			interval: {
				type: Number,
				default: 5000
			}
		},
		data() {
			return {
				dots: [],
				timer: null,
				currentPageIndex: 0
			}
		},
		mounted() {
			setTimeout(() => {
				this._setSliderWidth();
				this._initDots();
				this._initSlider();
				if (this.autoPlay) {
					this._play();
				}
			}, 20);
			window.addEventListener('resize', () => {
				if (!this.slider || !this.$refs.slider) return;
				this._setSliderWidth(true);
				this.slider.refresh();
			}, false);
		},
		methods: {
			_setSliderWidth(isResize) {
				let width = 0;
				this.children = this.$refs.sliderGroup.children;
				let sliderWidth = this.$refs.slider.clientWidth;
				for (let i = 0; i < this.children.length; i++) {
					let child = this.children[i];
					addClass(child, 'slider-item');
					child.style.width = sliderWidth + 'px';
					width += sliderWidth;
				}
				if (this.loop && !isResize) {
					width += sliderWidth * 2;
				}
				this.$refs.sliderGroup.style.width = width + 'px';
			},
			_initSlider() {
				this.slider = new BScroll(this.$refs.slider, {
					scrollX: true,
					scrollY: false,
					momentum: false,
					snap: true,
					snapLoop: this.loop,
					snapThreshold: 0.3,
					snapSpeed: 400,
					useTransition: true,
					useTransform: true
				});
				this.slider.on('scrollEnd', () => {
					let pageIndex = this.slider.getCurrentPage().pageX;
					if (this.loop) {
						pageIndex -= 1;
					}
					this.currentPageIndex = pageIndex;
					if (this.autoPlay) {
						clearTimeout(this.timer);
						this._play();
					}
				});
			},
			_initDots() {
				this.dots = new Array(this.children.length);
			},
			_play() {
				let pageIndex = this.currentPageIndex + 1;
				if (this.loop) {
					pageIndex += 1;
				}
				this.timer = setTimeout(() => {
					this.slider && this.slider.goToPage(pageIndex, 0, 400);
				}, this.interval);
			}
		},
		destroyed() {
			clearTimeout(this.timer);
		}
	}
</script>

<style lang="stylus" scoped>
	@import '../../common/stylus/variable'

	.slider
		min-height: 1px
		.slider-group
			position: relative
			overflow: hidden
			white-space: nowrap
			.slider-item
				float: left
				box-sizing: border-box
				overflow: hidden
				text-align: center
				a
					display: block
					width: 100%
					overflow: hidden
					text-decoration: none
					img
						display: block
						width: 100%
						height: 174px
		.dots
			position: absolute
			left: 0
			right: 0
			bottom: 12px
			text-align: center
			font-size: 0
			.dot
				display: inline-block
				margin: 0 4px
				width: 8px
				height: 8px
				border-radius: 50%
				background: $color-text-l
				&.active
					width: 20px
					border-radius: 5px
					background: $color-text-ll
</style>